<template>
  <div >
    <el-row>
      <!-- <el-col :span="24">
        <div class="alert alert-primary" title="教师课件" role="alert">教师课件</div>
      </el-col> -->
    </el-row>
    <el-row>
      <el-col class="border" :span="6" style="margin-right: 28px;border: none !important;background: #fff;padding: 10px;height: 859px;overflow-y: auto;">
        <h3 class="text-center" style="display: flex;margin-bottom: 22px;">
           <h3 style="flex:1;">目录</h3>
            <div class="col-sm-12 phonequery" style="flex:2;">
        <el-input class="col-sm-12 phoneinput" placeholder="在全部课程里面查询" v-model="value5"></el-input>
      </div>
        </h3>
        <el-tree
          :data="data"
          node-key="ID"
          :props="defaultProps"
          :check-on-click-node="true"
          :expand-on-click-node="true"
          @node-click="getdata"
          :highlight-current="true"
        ></el-tree>
      </el-col>
      <el-col class="border" :span="17" style="border: none !important;background: #fff;padding: 10px;">
        <h3 class="text-center" style="display: flex;margin-bottom: 22px;">
          <h3 style="flex:5;">详细资料</h3>
           <div class="col-sm-12 phonequery" style="flex:2;">
        <el-input class="col-sm-12 phoneinput" placeholder="请输入要查询的课程" v-model="value"></el-input>
      </div>
          <h6 class="text-right" style="flex:5;">
           
                  排序
                  <el-switch v-model="order" active-color="#13ce66" inactive-color="#ff4949" ></el-switch>
          
          </h6>
        </h3>
        
         <div class="text-justify" v-for="(v, i) in pageTableData" :key="`${i}teacherdata3`" style="border-bottom: 1px solid #DDDDDD;margin-bottom: 10px;display: flex;">
          {{i+1}}. &nbsp;&nbsp;
          <span style="flex:2;margin-bottom: 22px;">{{v.name}}</span>
          <div style="flex:1;" v-if="data.filter(d=>d.ID == v.teacherproposalid)!=''">
            {{data.filter(d=>d.ID==v.teacherproposalid)[0].name}}&nbsp;&nbsp;
          </div>
          <div style="flex:1;" v-else>
            {{data.filter(d=>d.children != '')[0].name}}
          </div>
          <div style="flex:1;" class=" alert-primary" role="alert">
            <span class="updatat">更新日期：{{v.updated_at}}</span>
        </div >
          <div style="width: 50px;height: 26px;background: #2F81F1;text-align: -webkit-center;border-radius: 5px;"><a style="color:#ffffff;" target="_blank" :href="href(v.ID)" v-show="!v.isdown">查看</a>
          <a style="color:#ffffff;" :href="v.fileurl" v-show="v.isdown">下载</a>
          </div>
        </div>
        <el-pagination
    style="float: right;margin-right: 38px;"
  small
  v-show="this.tpdata.length>14"
  @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[14]"
        :page-size="14"
  layout="total, sizes, prev, pager, next, jumper"
  :total="this.tpdata.length">
</el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {asyncselectallusertotpdataidd} from "../../../plugins/api.js";
import { mapGetters } from "vuex";
import _ from "underscore";
export default {
  name: "teacherdata",
  computed:{
     ...mapGetters([ "getuser","getTeacherproposal", "getTpdata"]),
     pageTableData() {
      let pages = Math.ceil(this.tpdata.length / 14); //12为每页设置数量
      let newList = [];
      for (let i = 0; i < pages; i++) {
        let sonList = [];
        sonList = this.tpdata.slice(i * 14, i * 14 + 14); //12为每页设置数量
        newList.push(sonList);
      }
      return newList[this.currentPage - 1];
    },
  },
  data() {
    return {
      href3: "",
      value: "",
      value5:"",
      data: [],
      order: false,
      defaultProps: {
        children: 'children',
        label: "name"
      },
      description: {
        name: "",
        info: "",
        tag: ""
      },
       currentPage: 1,
      pagesize: 20,
      tpdata: [],
      tpdatad: [],
      tpdata88: [],
      all:[],
      allkechneg:[]
    };
  },
  watch: {
    value(v) {
      this.nameQuery(v);
    },
    value5(v) {
      this.namesQuery(v);
    },
     currentPage(v) {
      console.log(v);
    },
    pagesize(v) {
      console.log(v);
    },
    order(v) {
      this.tpdata = this.tpdata = _.sortBy(this.tpdata, i => {
        if (v) {
          return -i.paixu;
        } else {
          return i.paixu;
        }
      });
    }
  },
  async mounted() {
    this.start();
  },
  methods: {
    nameQuery(value) {
      if (value) {
        this.tpdata = [];
        this.tpdata = this.tpdata88.filter(v => {
          if (v.name) {
            return String(v.name).indexOf(value) != -1;
          }
          return false;
        });
      } else {
        this.tpdata = this.tpdata88;
      }
    },
    namesQuery(value) {
      if (value) {
        this.tpdata = [];
        this.tpdata = this.allkechneg.filter(v => {
          if (v.name) {
            return String(v.name).indexOf(value) != -1;
          }
          return false;
        });
      } else {
        this.tpdata = this.allkechneg;
      }
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    async start() {
      this.all =JSON.parse(JSON.stringify( await asyncselectallusertotpdataidd()));
      for(let l in this.all){
        this.allkechneg.push(this.getTpdata.filter(v => v.ID == this.all[l].tpdata_ID)[0])
      }
      function a(x, id) {
        let arr = [];
        for (let v in x) {
          if (x[v].pid == id) {
            x[v].children = uniq(a(x, x[v].ID));
            arr.push(x[v]);
          }
        }
        return arr;
      }
       let arrer =[]
      for(let l in this.all){
        const teacherID = this.getTpdata.filter(v => v.ID == this.all[l].tpdata_ID)[0].teacherproposalid
       arrer.push(this.getTeacherproposal.find(v=> v.ID==teacherID ))
      const pid = this.getTeacherproposal.find(v=> v.ID==teacherID ).pid
       if(pid != null){
         arrer.push(this.getTeacherproposal.find(v=> v.ID==pid ))
       }
      }
      function uniq(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}
 const listd=uniq( a(arrer, null))
     for(let a in listd ){
       listd[a].children.sort(this.compare("paixu")); 
     }
 listd.sort(this.compare("ID")); 
      this.data = listd;
    
    },
    compare(pro) { 
    return function (obj1, obj2) { 
        var val1 = obj1[pro]; 
        var val2 = obj2[pro]; 
        if (val1 < val2 ) { //正序
            return -1; 
        } else if (val1 > val2 ) { 
            return 1; 
        } else { 
            return 0; 
        } 
    } 
},
    href(ID) {
        return `/wordliulan.html?ID=${ID}`;
    },
    getdata(i) {
       const { ID, name, info, tag } = i;
      this.description = {
        name,
        info,
        tag
      };
        const arr1=this.getTpdata.filter(v => v.teacherproposalid  == ID)
        const arr2=[];
        for(let e in this.all){
          
          arr2.push(this.getTpdata.filter(v => v.ID == this.all[e].tpdata_ID)[0])
        }
        var newjson = []
        for(var c =0;c<arr1.length;c++){  
          for(var j =0;j<arr2.length;j++){
            if(arr1[c].ID == arr2[j].ID){
                newjson.push(arr2[j])
            }
          }
        }
        this.tpdata=newjson
        this.tpdata88=newjson
         this.tpdata=this.tpdata.sort(this.compare("paixu")); 
    }
  }
};
</script>

<style lang="scss" scoped>
.updatat{
  color:black;
}
.alert-primary{
  // border-radius: 5px ;
  //     display: inline-table !important;
  float: right;
      background-color: #ffffff;
}
.rectangle-5 {
  background-color: #ffffff;
  box-shadow: 1px 2px 6px 0px rgba(139, 157, 175, 0.1);
  padding: 26px;
}

h5 {
  margin-right: 45px;
}
h3 {
    font-size: 1.2rem;
}
h4 {
    font-size: 1.0rem;
}
.text-center{
  text-align:left !important;
}

</style>
<style>
.el-main{
  padding: 20px;
}
.el-tree-node__content {
  height: auto !important;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{
   background-color: #ffffff !important;
   color:#2F81F1 !important;
}
.el-tree-node{
  margin-bottom:10px;
}
</style>